<template>
    <div id="GovernmentMana">
        
        <div class="top_content">
            <div class="title">
                <h1>政府碳管理</h1>
                <p>Government carbon management</p>
            </div>
        </div>
        
        <div class="mid_content clearfix">
            <div class="mid_content_left">
                <el-row class="tac">
                    <el-col :span="18">
                    <h5 class="mb-2">政府碳管理</h5>
                    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > 
                        <el-menu-item index="1" @click="tabclick('1')">
                            <el-icon><document /></el-icon>
                            <span>区域温室气体排放清单</span>
                        </el-menu-item>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>企业数据监测</span>
                            </template>
                            <el-menu-item index="2-1" @click="tabclick('2-1')">报告审批</el-menu-item>
                            <el-menu-item index="2-2" @click="tabclick('2-2')">政府复核</el-menu-item>
                            <el-menu-item index="2-3" @click="tabclick('2-3')">查询统计</el-menu-item>
                            <el-menu-item index="2-4" @click="tabclick('2-4')">数据分析</el-menu-item>
                            <el-menu-item index="2-5" @click="tabclick('2-5')">数据监测报告</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>企业数据报送</span>
                            </template>
                            <el-menu-item index="3-1" @click="tabclick('3-1')">不符合情况整改</el-menu-item>
                            <el-menu-item index="3-2" @click="tabclick('3-2')">温室气体排放报告报送</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="4" @click="tabclick('4')">
                            <el-icon><document /></el-icon>
                            <span>低碳发展规划</span>
                        </el-menu-item>
                        <el-menu-item index="5" @click="tabclick('5')">
                            <el-icon><document /></el-icon>
                            <span>低碳试点方案</span>
                        </el-menu-item>
                        <el-menu-item index="6" @click="tabclick('6')">
                            <el-icon><setting /></el-icon>
                            <span>年度企业碳排放考核</span>
                        </el-menu-item>
                    </el-menu>
                    </el-col>
                </el-row>
            </div>
            <div class="mid_content_right">
                <div class="content1"  v-if="treeIndex == '1'">
                    <div class="leftTitle">区域温室气体排放清单</div>
                     <el-table :data="tableData" border style="width: 100%">
                        <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" />
                        <!-- <el-table-column prop="name" label="Name" width="180" />
                        <el-table-column prop="address" label="Address" /> -->
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :total="tableData.length" :hide-on-single-page="tableData.length<10" :page-size="10" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
                </div>
                <div class="content1" v-if="treeIndex == '2-1'">
                    <div class="leftTitle">报告审批
                        <el-button color="#626aef" size="small"  :dark="isDark">上传</el-button></div>
                    <div class="">
                        <div class="reportL" v-for="(item,index) in reportList" :key="item">
                            <div class="report_content clearfix">
                                <div class="report_left_img"><img :src="item.img" alt=""></div>
                                <div class="report_right_text">
                                    <div class="report_title">{{item.title}}</div>
                                    <div class="report_title_content">{{item.content}}</div>
                                    <div class="report_button">
                                        <el-button color="#626aef"  :dark="isDark" @click="download(index)">下载</el-button>
                                        <el-button color="#626aef"  :dark="isDark">审批</el-button>
                                        <el-button color="#626aef"  :dark="isDark">驳回</el-button>
                                        <el-button color="#626aef"  :dark="isDark">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content1" v-if="treeIndex == '2-2'">
                    <div class="leftTitle">政府复核</div><div class="">
                        <div class="reportL" v-for="(item,index) in reportList" :key="item">
                            <div class="report_content clearfix">
                                <div class="report_left_img"><img :src="item.img" alt=""></div>
                                <div class="report_right_text">
                                    <div class="report_title">{{item.title}}</div>
                                    <div class="report_title_content">{{item.content}}</div>
                                    <div class="report_button">
                                        <el-button color="#626aef"  :dark="isDark" @click="download(index)">下载</el-button>
                                        <el-button color="#626aef"  :dark="isDark">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content1" v-show="treeIndex == '2-3'">
                    <div class="leftTitle">查询统计</div>
                    <div class="">
                        <div class="search">
                            <el-input v-model="input2" class="w-50 m-2" placeholder="输入关键字搜索" :suffix-icon="Search" />
                        </div>
                        
                        <ul class="clearfix" style="margin-left:-50px">
                            <li :class="contIndex2== index? 'nowsli normalLi' : 'normalLi'" v-for="(item,index) in tabList2" :key="item.id" @click="contIndex2 = index">
                                {{item}}
                            </li>
                        </ul>

                        <div class="chart_part chartpart1">
                            <div class="first_e" id="myChart1" style="width:600px;height:300px"></div>
                        </div>
                    </div>
                </div>
                <div class="content1" v-show="treeIndex == '2-4'">
                    <div class="leftTitle">数据分析
                        <el-button color="#626aef" size="small"  :dark="isDark">数据上传</el-button></div>
                    <div class="">
                        <!-- <div class="search">
                            <el-input v-model="input2" class="w-50 m-2" placeholder="输入关键字搜索" :suffix-icon="Search" />
                        </div> -->
                        <div class="chart_part chartpart1">
                            <div class="first_e" id="myChart2" style="width:600px;height:300px"></div>
                        </div>
                    </div>
                </div>
                <div class="content1" v-if="treeIndex == '2-5'">
                    <div class="leftTitle">数据监测报告</div>
                </div>
                <div class="content1" v-if="treeIndex == '3-1'">
                    <div class="leftTitle">不符合情况整改 
                        <el-button color="#626aef" size="small"  :dark="isDark">上传</el-button>
                    </div>
                    <div>
                        <el-collapse accordion>
                            <el-collapse-item name="1">
                                <template #title>
                                xxx项目不符合情况整改通知  &nbsp;&nbsp;
                                <el-button color="#626aef" size="small"  :dark="isDark">下载文件</el-button>
                                </template>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                            </el-collapse-item>
                            <el-collapse-item title="Feedback" name="2">
                                
                                <template #title>
                                xxx项目不符合情况整改通知  &nbsp;&nbsp;
                                <el-button color="#626aef" size="small"  :dark="isDark">下载文件</el-button>
                                </template>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                            </el-collapse-item>
                            <el-collapse-item title="Efficiency" name="3">
                                
                                <template #title>
                                xxx项目不符合情况整改通知  &nbsp;&nbsp;
                                <el-button color="#626aef" size="small"  :dark="isDark">下载文件</el-button>
                                </template>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                            </el-collapse-item>
                            <el-collapse-item title="Controllability" name="4">
                                
                                <template #title>
                                xxx项目不符合情况整改通知  &nbsp;&nbsp;
                                <el-button color="#626aef" size="small"  :dark="isDark">下载文件</el-button>
                                </template>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                                <div>
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知xxx项目不符合情况整改通知
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
                <div class="content1" v-if="treeIndex == '3-2'">
                    <div class="leftTitle">温室气体排放报告报送
                        <el-button color="#626aef" size="small"  :dark="isDark">上传</el-button>
                        <el-button color="#626aef" size="small"  :dark="isDark">下载</el-button>
                    </div>
                    <div class="reportRead">
                        <div class="title_read">化工企业温室气体排放报告</div>
                        <p class="head_read">报告主体（盖章）：xxxxxx有限公司</p>
                        <p class="head_read">报告年度：2022</p>
                        <p class="head_read">编制日期：2022-06-01</p>
                        <div class="content_read">
                            本报告主体包含22个行业，其在2010年度温度气体排放总量2866455.55屯CO,当量，根据国家发展和改革委员会发布的。中国化工生产企业温室气体排放核算方法与报告指南（试行）》，核算了化工生产部分温室气体排放量，井填写了相关数据表格。现将有关情况报告如下：
                            
                        </div>
                        <div class="content_read">
                            ……
                        </div>
                    </div>
                </div>
                <div class="content1" v-if="treeIndex == '4'">
                    <div class="leftTitle">低碳发展规划</div>
                </div>
                <div class="content1" v-if="treeIndex == '5'">
                    <div class="leftTitle">低碳试点方案</div>
                </div>
                <div class="content1" v-if="treeIndex == '6'">
                    <div class="leftTitle">年度企业碳排放考核 <el-button color="#626aef" size="small"  :dark="isDark">导出</el-button></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { InfoFilled } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
export default {
    data() {
        return {
            InfoFilled,Search,
            tableData:[{
                    date: '2016-05-03',
                    CO2: '12',
                    CH4: '23',
                    N2O: '345',
                    HFCs: '24',
                    SF6: '36',
                    GHG: '56',
                    PFCs: '234',
                },
                {
                    date: '2016-05-03',
                    CO2: '12',
                    CH4: '23',
                    N2O: '345',
                    HFCs: '24',
                    SF6: '36',
                    GHG: '56',
                    PFCs: '234',
                },
                {
                    date: '2016-05-03',
                    CO2: '12',
                    CH4: '23',
                    N2O: '345',
                    HFCs: '24',
                    SF6: '36',
                    GHG: '56',
                    PFCs: '234',
                },
                {
                    date: '2016-05-03',
                    CO2: '12',
                    CH4: '23',
                    N2O: '345',
                    HFCs: '24',
                    SF6: '36',
                    GHG: '56',
                    PFCs: '234',
                },],
            treeIndex:1,
            tableColumn:[{"type":'1',"prop":"date","label":"日期","width":""},{"type":'1',"prop":"CO2","label":"CO2(万吨)","width":""},{"type":'1',"prop":"CH4","label":"CH4(万吨)","width":""},
            {"type":'1',"prop":"N2O","label":"N2O(万吨)","width":""},{"type":'1',"prop":"HFCs","label":"HFCs(万吨)","width":""},{"type":'1',"prop":"SF6","label":"SF6(万吨)","width":""},
            {"type":'1',"prop":"GHG","label":"GHG(万吨)","width":""},{"type":'1',"prop":"PFCs","label":"PFCs(万吨)","width":""},],
            reportList:[
                    {"id":'1',"title":"测试","content":"调整测试页面布局使用demo，完成demo制作及样式调整，word就直接使用word标签图案","img":require("../../assets/file-word.png"),"state":""},
                    {"id":'1',"title":"测试","content":"调整测试页面布局使用demo，完成demo制作及样式调整，word就直接使用word标签图案","img":require("../../assets/file-word.png"),"state":""}
            ],
            input2:'',
            tabList2:['月度概况','季度概况','年度概况'],
            contIndex2:0,        
            //折线图
            myChart1:null,
            lineCharts:{
                title: { text: "行情信息" },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',

                    data: ['深圳', '北京', '上海', '广东', '湖北','重庆','四川','福建','天津'],
                    icon: 'rect'
                },
                xAxis: {
                    // type: 'date',
                    // boundaryGap: ['2021-01-01', '2022-06-22'],
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {},
                series: [
                    {
                        name: '深圳',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '北京',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '上海',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '广东',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '湖北',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    },
                    {
                        name: '重庆',
                        type: 'line',
                        stack: 'Total',
                        data: [123, 542, 454, 344, 934, 430, 1453]
                    },
                    {
                        name: '四川',
                        type: 'line',
                        stack: 'Total',
                        data: [340, 563, 101, 452, 785, 120, 453]
                    },
                    {
                        name: '福建',
                        type: 'line',
                        stack: 'Total',
                        data: [340, 563, 101, 452, 785, 120, 644]
                    },
                    {
                        name: '天津',
                        type: 'line',
                        stack: 'Total',
                        data: [637, 454, 125, 452, 785, 214, 374]
                    },
                ],
            },
            data2:[
                {
                    name: 'Apples',
                    value: 70
                },
                {
                    name: 'Strawberries',
                    value: 68
                },
                {
                    name: 'Bananas',
                    value: 48
                },
                {
                    name: 'Oranges',
                    value: 40
                },
                {
                    name: 'Pears',
                    value: 32
                },
                {
                    name: 'Pineapples',
                    value: 27
                },
                {
                    name: 'Grapes',
                    value: 18
            }],
            lineCharts2:{
                title: [
                    {
                        text: '碳交易数据饼图',
                        left: 'center'
                    },
                    {
                        subtext: '碳交易量',
                        left: '25%',
                        top: '75%',
                        textAlign: 'center'
                    },
                    {
                        subtext: '碳交易额',
                        left: '75%',
                        top: '75%',
                        textAlign: 'center'
                    },
                ],
                series: [
                    {
                        type: 'pie',
                        radius: '25%',
                        center: ['50%', '50%'],
                        data:  [{
                                name: 'Apples',
                                value: 70
                            },
                            {
                                name: 'Strawberries',
                                value: 68
                            },
                            {
                                name: 'Bananas',
                                value: 48
                            },
                            {
                                name: 'Oranges',
                                value: 40
                            },
                            {
                                name: 'Pears',
                                value: 32
                            },
                            {
                                name: 'Pineapples',
                                value: 27
                            },
                            {
                                name: 'Grapes',
                                value: 18
                        }],
                        label: {
                            position: 'outer',
                            alignTo: 'none',
                            bleedMargin: 5
                        },
                        left: 0,
                        right: '50%',
                        top: 0,
                        bottom: 0
                    },
                    {
                        type: 'pie',
                        radius: '25%',
                        center: ['50%', '50%'],
                        data:  [
                            {
                                name: 'Apples',
                                value: 70
                            },
                            {
                                name: 'Strawberries',
                                value: 68
                            },
                            {
                                name: 'Bananas',
                                value: 48
                            },
                            {
                                name: 'Oranges',
                                value: 40
                            },
                            {
                                name: 'Pears',
                                value: 32
                            },
                            {
                                name: 'Pineapples',
                                value: 27
                            },
                            {
                                name: 'Grapes',
                                value: 18
                        }],
                        label: {
                            position: 'outer',
                            alignTo: 'labelLine',
                            bleedMargin: 5
                        },
                        left: '50%',
                        right: 0,
                        top: 0,
                        bottom: 0
                    },
                ]
            },
        }
    },
    methods:{
        load(){

        },
        toDetail(index){
            this.$router.push({path:'articleRead',query:{back:'/'}});
        },
        toMore(){

        },
        download(index){

        },
        handleOpen(){

        },
        handleClose(){

        },
        tabclick(index){
            this.treeIndex = index;
            if(index == '2-3'){
                this.drawLine()
            }
            if(index == '2-4'){
                this.drawLine2()
            }
        },
        /*渲染折线图*/
        drawLine(){
            let base = +new Date(1968, 9, 3);
            let oneDay = 24 * 3600 * 1000;
            let date = [];
            let data = [Math.random() * 300];
            for (let i = 1; i < 20000; i++) {
                var now = new Date((base += oneDay));
                date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
            }
            if (!this.myChart1) {
                console.log(123)
                this.myChart1 = this.$echarts.init(document.getElementById('myChart1'));
                // window.addEventListener("resize", () => {
                //     this.myChart1.resize();
                // });
            }else{
                this.myChart1.clear();
            }
            
            this.lineCharts.series = this.lineCharts.series;
            // 绘制图表
            this.myChart1 && this.myChart1.setOption(this.lineCharts);
            // this.myChart1.resize();
        },
        drawLine2(){
            if (!this.myChart2) {
                this.myChart2 = this.$echarts.init(document.getElementById('myChart2'));
                // window.addEventListener("resize", () => {
                //     this.echartsLine.resize();
                // });
            }else{
                this.myChart2.clear();
            }
            this.lineCharts2 = this.lineCharts2
            // 绘制图表
            this.myChart2 && this.myChart2.setOption(this.lineCharts2);
            this.myChart2.resize();
        },
        handleSizeChange(n){
            console.log(n)

        },
        handleCurrentChange(n){
            console.log(n)

        }
    },
    mounted(){
        window.scrollTo(0,0);
    }
}
</script>


<style scoped>
/* #AboutUs{
    position: relative;
} */
#GovernmentMana{
    height: 100%;
}
.top_content{
    width:100%;
    height:480px;
    background: url("../../assets/a.png");
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;

}
.top_content .title{
    margin-top: 60px;
    color: #333;
}
.mid_content{
    width: 1080px;
    position:relative;
    left: 50%;
    margin-left:-540px;
    top:-300px;
    min-height: 600px;
    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.mid_content_left{
    width: 30%;
    float: left;
}
.mid_content_right{
    width: 70%;
    float: left;
}
.leftTitle{
    line-height: 40px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom:20px;
}
.reportRead{
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
    border: 1px solid #efefef;
}
.reportRead .title_read{
    color:#333;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}
.head_read{
    font-size: 18px;
    color:#333;
    font-weight: bold;
    text-align: left;
    line-height: 30px;
}
.content_read{
    font-size: 16px;
    color: #666;
    line-height: 20px;
    text-indent: 20px;
}

.report_content{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}
.report_content:hover{

    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
}
.report_left_img{
    float: left;
    width: 100px;
    padding: 10px;
    box-sizing: border-box;
}
.report_left_img img{
    width: 80px;
    height: 80px;
}
.report_right_text{
    width: calc(100% - 100px);
    float: left;
}
.report_title_content{
    color:#666;
    line-height: 30px;
    margin-bottom: 10px;
}
.report_title{
    font-size: 18px;
    font-weight: bold;
}
.report_button{
    float: right;
}
.search{
    float: left;
}


ul{
    list-style: none;

}
.normalLi{
    padding: 10px 20px;
    border: 1px solid #efefef;
    border-radius: 4px;
    color:#666;
    font-size: 14px;
    margin-left: 10px;
    margin-block: 10px;
    float: left;
    width: auto;
}
.nowsli{
    background: #333;
    color:#fff;
}
.normalLi:hover{
    cursor: pointer;
}
.chart_part{
    width:100%;
    /*margin-left:5%;*/
    height: 300px;
    margin-top: 60px;
    border-bottom: 1px solid #efefef;
    padding: 10px 0;
}
.chartpart1{
    height: 300px!important;
}
#lineChart{
    width:500px;
    height:300px;
}
</style>